
<template>
  <div class="order-config">
    <div class="config-section">
      <div class="section-title">配送方式默认</div>
      <div class="section-desc">配送开单时的默认配送方式</div>
      <el-radio-group v-model="deliveryMethod">
        <el-radio label="到付">到付</el-radio>
        <el-radio label="自提">自提</el-radio>
        <el-radio label="送货上门">送货上门</el-radio>
        <el-radio label="等通知放货">等通知放货</el-radio>
      </el-radio-group>
    </div>

    <div class="config-section">
      <div class="section-title">开单默认</div>
      <div class="section-desc">配送开单时的默认付款方式</div>
      <el-radio-group v-model="paymentMethod">
        <el-radio label="到付">到付</el-radio>
        <el-radio label="现付">现付</el-radio>
        <el-radio label="月结">月结</el-radio>
      </el-radio-group>
    </div>

    <div class="config-section">
      <div class="section-title">默认运费设置</div>
      <div class="price-inputs">
        <div class="input-item">
          <div class="input-label">方量价格</div>
          <el-input 
            v-model="volumePrice" 
            placeholder="请输入方量价格"
            class="price-input"
          />
        </div>
        <div class="input-item">
          <div class="input-label">重量价格</div>
          <el-input 
            v-model="weightPrice" 
            placeholder="请输入重量单价"
            class="price-input"
          />
        </div>
      </div>
    </div>

    <div class="button-group">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

/**
 * 此页面对应系统管理下的 开单配置
 */

// 配送方式
const deliveryMethod = ref('到付')
// 付款方式
const paymentMethod = ref('到付')
// 价格设置
const volumePrice = ref('')
const weightPrice = ref('')

// 保存配置
const handleSave = () => {
  // TODO: 调用API保存配置
  ElMessage.success('保存成功')
}

// 重置配置
const handleReset = () => {
  deliveryMethod.value = '到付'
  paymentMethod.value = '到付'
  volumePrice.value = ''
  weightPrice.value = ''
  ElMessage.success('重置成功')
}
</script>

<style scoped>
.order-config {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.config-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.section-desc {
  font-size: 12px;
  color: #909399;
  margin-bottom: 16px;
}

.el-radio-group {
  display: flex;
  gap: 20px;
}

.price-inputs {
  display: flex;
  gap: 20px;
  margin-top: 16px;
}

.input-item {
  flex: 1;
}

.input-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.price-input {
  width: 100%;
}

.button-group {
  margin-top: 30px;
  display: flex;
  gap: 12px;
}

:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-radio__label) {
  color: #606266;
}

:deep(.el-radio.is-checked .el-radio__label) {
  color: #4066FF;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #4066FF;
  border-color: #4066FF;
}
</style> 